<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="name" placeholder="分站名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="account" placeholder="登录账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="shousuo">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->

    <el-table highlight-current-row :data="dataList">
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="name" label="分站名称"></el-table-column>
      <el-table-column prop="account" label="登录账号"></el-table-column>
      <el-table-column prop="contactPerson" label="联系人"></el-table-column>
      <el-table-column prop="mobile" label="联系电话"></el-table-column>
      <el-table-column prop="createTime" label="开通时间"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.deleteFlag==false">正常</span>
          <span v-if="scope.row.deleteFlag==true">停用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.deleteFlag==false" type="text" size="small" @click="used(scope.row.id,false)">停用</el-button>
					<el-button v-if="scope.row.deleteFlag==true" type="text" size="small" @click="used(scope.row.id,true)">启用</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </section>
</template>
<script>
import {gettime} from "../../utils/formData";  
export default {
  data() {
    return {
      account: "",
      name: "",
      page: 1,
      size: 10,
      total: 0,
      dataList: [],
      open: true
    };
  },
  methods: {
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          Authorization: sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          domain: "taobao.tianyalei.com"
        },
        url:
          "/webSite?page=" +
          (that.page - 1) +
          "&size=" +
          that.size +
          "&name=" +
          that.name +
          "&account=" +
          that.account
      }).then(function(response) {
        if (response.data.code == 200) {
          that.dataList = response.data.data.list;
          that.total = response.data.data.totalCount;
          for(var i=0;i<that.dataList.length;i++){
						 that.dataList[i].createTime=gettime(that.dataList[i].createTime)
					}
        }
      });
		},
		edit(id){
			this.$router.push({ 
        path:'/form',
        query: {
            id:id
        }
      })
    },
		del(id){
			 let that=this;
			 this.$confirm('确定要删除此分站吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
						that.axios({
						url: "/webSite/"+id,
						method: "Delete",
						headers: {
							"Authorization": sessionStorage.getItem("token"),
							"Content-Type": "application/x-www-form-urlencoded",
							"domain": "taobao.tianyalei.com"
						}
					})
						.then(response => {
							if (response.data.code ==200) {
								that.$message({
									message: "删除成功",
									type: "success"
								});
								that.shousuo();
							} 
						})
					
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
				});
		},
		used(id,istrue){
			let that=this;
       this.axios.post('/webSite/open', 
				this.qs.stringify({id:id,open:istrue}), {
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
         })
					.then(function (response) {
						if(response.data.code==200){ 
								that.$message({
									message:'修改成功',
									type: 'success'
								});  
								that.shousuo();
							}
						})
		},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.shousuo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.shousuo();
    }
  },
  created() {
    this.shousuo();
  }
};
</script>

<style scoped>
</style>